<!-- 高级搜索的 折叠面板 -->
<template>
  <div class="collapse-wrap">
    <div class="senior-search-top " @click="collapse = !collapse">
      <div slot="header" class="clearfix">
        <span>   {{ title }}</span>
        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
      </div>
    </div>
    <el-divider></el-divider>
    <el-collapse-transition>
      <div v-if="collapse">
        <slot/>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
export default {

  name: 'CollapseBread',
  components: {},
  filters: {},
  props: ['title', {

    isCollapse: {
      type: Boolean,
      default: true
    }
  }],
  data() {
    return {
      collapse: this.isCollapse
    }
  }
}
</script>

<style lang="scss" scoped>
.collapse-wrap {
  color: #ea15a6;
  width: 100%;
  background: #e7ecd1;

  .senior-search-top {
    display: flex;
    align-items: center;
    cursor: pointer;

    .line {
      flex: 1;
      height: 1px;
      background: #409eff;
    }

    .btn {
      width: 120px;
      //text-align: center;
    }
  }
}

/* normal-expand对应的CSS代码：  */
.normal-expand-enter-active,
.normal-expand-leave-active {
  transition: all 0.3s ease;
  height: 100% !important;
}

.normal-expand-enter,
.normal-expand-leave-to {
  height: 0px !important;
}

.el-divider--horizontal {
  margin: 5px;
}
</style>

